<template>
  <AppDownHeader/>
  <section class="login-section">
    <div class="wrapper-text">
      <p class="title">全新购物体验</p>
      <p class="sub-title">买好物，上优乐<br>快乐便捷的购物体验</p>
      <div class="download">
        <div>
          <img src="../../assets/images/qrcode.jpg" alt="" width="120px">
          <p>手机扫码下载App</p>
        </div>
        <div>
          <a href="">
            <img src="../../assets/images/android_normal.png" alt="" style="height:60px">
          </a>
          <a href="">
            <img src="../../assets/images/iphone_normal.png" alt="" style="height:60px">
          </a>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <!-- <XtxCarousel :sliders="sliders" auto-play style="height:545px" /> -->
      <img src="../../assets/images/v12_index_4.png" alt="">
    </div>
  </section>
  <AppDownFooter/>
</template>

<script>
import AppDownHeader from './components/appdown-header.vue'
import AppDownFooter from './components/appdown-footer.vue'
// import XtxCarousel from '@/components/library/xtx-carousel.vue'
import { findBanner } from '@/api/home'
import { ref } from 'vue'
export default {
  name: 'AppDownload',
  components: {
    AppDownHeader,
    AppDownFooter
    // XtxCarousel
  },
  setup () {
    // 轮播图
    const sliders = ref([])
    findBanner().then(data => {
      sliders.value = data.result
    })
    return { sliders }
  }
}
</script>

<style lang="less" scoped>
.login-section {
  background: url(../../assets/images/first_screen_bg.png) no-repeat center / cover;
  height: 745px;
  position: relative;
  .wrapper-text {
    width: 450px;
    min-height: 545px;
    position: absolute;
    left: 16%;
    top: 200px;
    transform: translate3d(100px,0,0);
    .title {
      color: #fff;
      font-size: 3.5em
    }
    .sub-title {
      color: #fff;
      font-size: 2.5em;
      font-weight: 200;
      line-height: 2em;
    }
    .download {
      display: flex;
      margin-top: 40px;
      align-items: center;
      div {
        padding: 7px;
        background-color: #fff;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        p {
          font-size: 13px;
          align-self: center;
          color: #333;
        }
      }
      div:nth-child(2) {
        background-color: transparent;
        justify-content: space-around;
        height: 154px;
        padding: 0;
        margin-left: 15px;
      }
    }
  }
  .wrapper {
    width: 450px;
    background: none;
    min-height: 545px;
    position: absolute;
    left: 47%;
    top: 150px;
    transform: translate3d(100px,0,0);
    // box-shadow: 0 0 10px rgba(0,0,0,.15);
  }
}
</style>
